import React, { Component } from 'react'
 
import { Layout, Menu } from 'antd';
import logo from "../../imges1/logo.png"
import {Link} from 'umi'
import style from "./index.css"
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MailOutlined,
  AppstoreOutlined
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
export default class index extends Component {
   
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
    render() {
        return (
            <div>
       <Layout style={{minHeight:'100vh'}}>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          {/* <div className={style.logo} /> */}
          <div  className={style.logo}>
            <img src={logo} alt="" className={style.logoImg}/>
           
          </div>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
          <SubMenu key="sub1" icon={<MailOutlined />} title="系统管理">
            <Menu.Item key="5">
              <Link to='/system/user'>
                用户管理
              </Link>
            </Menu.Item>
            <Menu.Item key="6">
            <Link to='/system/role'>
                角色管理
              </Link>
            </Menu.Item>
            <Menu.Item key="7">菜单管理</Menu.Item>
            <Menu.Item key="8">字典管理</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="商品管理">
            <Menu.Item key="1">
              <Link to='/gen/goods'>
                商品管理
              </Link>
            </Menu.Item>
            <Menu.Item key="2">
            <Link to='/gen/goodstype'>
                商品类型管理
              </Link>
            </Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" icon={<MailOutlined />} title="商铺管理">
            <Menu.Item key="3">
              <Link to='/gen/apply/charge'>
                电站审核
              </Link>
            </Menu.Item>
            <Menu.Item key="4">
            <Link to='/gen/apply'>
                商铺审核
              </Link>
            </Menu.Item>
            {/* <Menu.Item key="3">
            <Link to='/gen/goodstype'>
                投诉管理
              </Link>
            </Menu.Item>
            <Menu.Item key="4">
            <Link to='/gen/goodstype'>
                门店管理
              </Link>
            </Menu.Item> */}
          </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className={style.header} style={{ padding: 0 }}>
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
           
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
            </div>
        )
    }
}
